"use client"

import { useState, useEffect } from "react"
import Image from "next/image"

type WalletModalProps = {
  isOpen: boolean
  onClose: () => void
  onConnect: () => void
  isWalletInstalled: boolean
  isConnecting: boolean
  error: string | null
}

export default function WalletModal({
  isOpen,
  onClose,
  onConnect,
  isWalletInstalled,
  isConnecting,
  error,
}: WalletModalProps) {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    if (isOpen) {
      setIsVisible(true)
    } else {
      const timer = setTimeout(() => {
        setIsVisible(false)
      }, 300)
      return () => clearTimeout(timer)
    }
  }, [isOpen])

  if (!isVisible) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
      <div
        className={`bg-[#c0c0c0] win95-border p-1 w-80 transform transition-transform duration-300 ${
          isOpen ? "scale-100" : "scale-95"
        }`}
      >
        <div className="bg-[#000080] text-white px-1 py-1 flex items-center justify-between mb-2">
          <span className="text-sm font-bold">Connect Wallet</span>
          <button
            onClick={onClose}
            className="win95-button w-5 h-5 flex items-center justify-center text-black bg-[#c0c0c0]"
          >
            X
          </button>
        </div>

        <div className="p-2 text-center">
          <div className="mb-4">
            <Image
              src="/placeholder.svg?height=64&width=64"
              width={64}
              height={64}
              alt="Touch ID"
              className="mx-auto mb-2"
            />
            <h3 className="text-lg font-bold mb-1">Connect to OKX Wallet</h3>
            <p className="text-sm text-gray-700 mb-2">You are connecting to "OKX-Wallet-Extension"</p>
            <p className="text-xs text-gray-600 mb-4">Will request access to your Solana address</p>
          </div>

          {!isWalletInstalled ? (
            <div className="mb-4 text-red-600 text-sm">
              OKX Wallet extension not detected. Please install it first.
              <div className="mt-2">
                <a
                  href="https://www.okx.com/web3/wallet/download"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="win95-button bg-[#c0c0c0] px-2 py-1 text-sm inline-block"
                >
                  Download OKX Wallet
                </a>
              </div>
            </div>
          ) : (
            <>
              {error && <div className="mb-4 text-red-600 text-sm">{error}</div>}
              <div className="flex justify-center space-x-2">
                <button
                  onClick={onConnect}
                  className="win95-button bg-[#c0c0c0] px-4 py-2 text-sm"
                  disabled={isConnecting}
                >
                  {isConnecting ? "Connecting..." : "Connect"}
                </button>
                <button onClick={onClose} className="win95-button bg-[#c0c0c0] px-4 py-2 text-sm">
                  Cancel
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  )
}
